<template>
    <div class="mine">
        <!-- 顶部 -->
        <app-header>
            <template v-slot:header-tit>
                我的
            </template>
            <template v-slot:header-right>
                <svg t="1636007355196" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2524" width="128" height="128"><path d="M860.992 814.464H162.88A163.136 163.136 0 0 1 0 651.584V162.88A163.072 163.072 0 0 1 162.88 0h698.112a163.136 163.136 0 0 1 162.88 162.88v488.64a163.2 163.2 0 0 1-162.88 162.944zM162.88 46.592A116.48 116.48 0 0 0 46.528 162.944v488.64a116.48 116.48 0 0 0 116.352 116.352h698.112a116.352 116.352 0 0 0 116.288-116.352V162.88A116.48 116.48 0 0 0 860.992 46.528H162.88z" fill="#4D4D4D" p-id="2525"></path><path d="M511.936 443.84c-21.376 0-42.752-7.36-60.224-22.144L54.784 87.68a23.36 23.36 0 0 1 30.08-35.712l396.928 334.144c17.472 14.784 42.88 14.784 60.352 0L939.072 51.968a23.296 23.296 0 0 1 30.016 35.648l-396.992 334.08c-17.408 14.72-38.784 22.144-60.16 22.144z" fill="#4D4D4D" p-id="2526"></path></svg>
            </template>
        </app-header>
        <!-- 内容 -->
        <section class="contain-box">
            <!-- 头像和昵称 -->
            <div class="li-box my">
                <div class="left">
                    <div class="head-img">
                        <img :src="touxiang" alt="">
                    </div>
                    <p class="username">
                        {{nickname}}
                        <svg t="1635850150881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4701" width="128" height="128"><path d="M512.00012 0.00064a318.847801 318.847801 0 0 1 226.303859 93.695941A318.911801 318.911801 0 0 1 831.99992 320.00044a318.847801 318.847801 0 0 1-93.695941 226.303859A318.911801 318.911801 0 0 1 560.00009 636.416242v83.583948h159.9999A47.87197 47.87197 0 0 1 767.99996 768.00016a47.87197 47.87197 0 0 1-47.99997 47.99997h-159.9999v159.9359a47.87197 47.87197 0 0 1-47.99997 47.99997 47.87197 47.87197 0 0 1-47.99997-47.99997V816.00013h-159.9999A47.87197 47.87197 0 0 1 256.00028 768.00016a47.87197 47.87197 0 0 1 47.99997-47.99997h159.9999V636.416242a318.847801 318.847801 0 0 1-178.303889-90.175943A318.847801 318.847801 0 0 1 192.00032 320.00044a318.847801 318.847801 0 0 1 93.695941-226.303859A318.847801 318.847801 0 0 1 512.00012 0.00064z m0 95.99994C388.480197 96.00058 288.00026 196.480517 288.00026 320.00044S388.480197 544.0003 512.00012 544.0003 735.99998 443.520363 735.99998 320.00044 635.520043 96.00058 512.00012 96.00058z" p-id="4702" fill="#d4237a"></path></svg>
                    </p>
                </div>
                <div class="right">
                    <!-- 箭头 -->
                    <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                </div>
            </div>
            
            <div class="lis">
                <div class="li-box">
                    <div class="left">
                        <p class="">
                            <svg t="1635852325360" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7361" width="128" height="128"><path d="M513.66440635 950.29367195c-186.41351111 0-337.87448889-151.46097778-337.87448889-337.87448888s151.46097778-337.87448889 337.87448889-337.87448889c186.41351111 0 337.87448889 151.46097778 337.87448889 337.87448889S700.07791746 950.29367195 513.66440635 950.29367195z m0-619.1591619c-154.78979048 0-281.28467302 125.94008043-281.28467302 281.28467302s125.94008043 281.28467302 281.28467302 281.28467301c154.78979048 0 281.28467302-125.94008043 281.28467302-281.28467301S668.45419683 331.13451005 513.66440635 331.13451005z" fill="#2C2C2C" p-id="7362"></path><path d="M781.63382857 345.55936508c-7.76722963 0-15.53445926-3.3288127-21.08248043-9.43163598-10.54124021-11.65084444-9.43163598-29.40451217 2.21920848-39.94575238l34.95253333-31.62372064v-104.30279788H229.60572275v103.74799577l31.62372063 28.29490793c11.65084444 10.54124021 12.76044868 28.29490794 2.21920848 39.94575239-10.54124021 11.65084444-28.29490794 12.76044868-39.94575239 2.21920846l-41.05535661-36.61693968c-6.10282328-5.54802116-9.43163598-13.31525079-9.43163599-21.08248042V131.96055027c0-15.53445926 12.76044868-28.29490794 28.29490794-28.29490794h624.70718308c15.53445926 0 28.29490794 12.76044868 28.29490793 28.29490794v144.80335238c0 7.76722963-3.3288127 15.53445926-9.43163598 21.08248042l-44.38416931 39.94575238c-4.99321905 4.99321905-11.65084444 7.76722963-18.86327196 7.76722963z" fill="#2C2C2C" p-id="7363"></path><path d="M409.36160846 252.90741164c-15.53445926 0-28.29490794-12.76044868-28.29490793-28.29490794V131.96055027c0-15.53445926 12.76044868-28.29490794 28.29490793-28.29490794s28.29490794 12.76044868 28.29490794 28.29490794v92.65195343c0 15.53445926-12.76044868 28.29490794-28.29490794 28.29490794z m206.94118943 0c-15.53445926 0-28.29490794-12.76044868-28.29490794-28.29490794V131.96055027c0-15.53445926 12.76044868-28.29490794 28.29490794-28.29490794s28.29490794 12.76044868 28.29490793 28.29490794v92.65195343c0 15.53445926-12.76044868 28.29490794-28.29490793 28.29490794zM622.96042328 800.49710053c-3.88361481 0-8.32203175-1.10960424-12.20564656-3.3288127l-100.97398518-54.92540953-102.63839154 52.15139895c-8.32203175 4.43841693-18.86327195 3.3288127-26.63050159-2.21920847s-11.65084444-15.53445926-9.43163598-24.96609524l21.08248043-113.17963174-81.001109-81.55591112c-6.6576254-6.6576254-8.87683386-16.64406349-6.10282327-26.07569946s11.09604233-15.53445926 20.5276783-16.64406349L439.87572487 514.77401059l52.70620105-102.63839154c4.43841693-8.32203175 13.31525079-13.87005291 22.74688678-13.87005291s18.30846984 5.54802116 22.19208465 14.42485502l49.37738836 103.74799577 113.73443386 18.30846985c9.43163598 1.66440635 17.19886561 8.32203175 19.97287619 17.1988656s0 18.86327195-6.65762539 25.52089735l-83.77511958 79.33670265 17.75366773 113.73443386c1.66440635 9.43163598-2.77401059 18.86327195-10.54124022 24.41129313-4.43841693 3.88361481-9.43163598 5.54802116-14.42485502 5.54802116zM510.33559365 688.98187513c3.88361481 0 8.32203175 1.10960424 12.20564656 3.3288127l67.6858582 37.1717418-12.20564655-76.56269206c-1.10960424-8.32203175 1.66440635-16.64406349 7.76722962-22.19208466l56.03501376-53.26100318-76.56269207-12.20564656c-8.32203175-1.10960424-14.97965714-6.6576254-18.86327195-13.8700529l-33.28812698-69.90506667-34.39773122 68.24066032c-3.88361481 7.21242751-11.09604233 12.20564656-19.41807408 13.31525079l-76.56269207 9.9864381 54.37060742 54.92540952c6.10282328 6.10282328 8.32203175 14.42485503 6.65762539 22.19208465l-14.42485503 76.00788995 68.79546244-34.95253333c4.43841693-1.66440635 8.32203175-2.21920846 12.20564656-2.21920847z" fill="#2C2C2C" p-id="7364"></path></svg>
                            我的称号
                        </p>
                    </div>
                    <div class="right">
                        <!-- 箭头 -->
                        <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                    </div>
                </div>
                <div class="li-box" @click="toMyCollection">
                    <div class="left">
                        <p class="">
                            <svg t="1635852402712" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8167" width="128" height="128"><path d="M946.44567 407.179676c-3.706415-11.056823-13.268188-19.154245-24.823362-20.929682l-263.117606-40.614L540.930913 93.91802c-5.108345-10.93198-16.071024-17.939581-28.155247-17.971303-0.030699 0-0.062422 0-0.062422 0-12.021801 0-22.985504 6.945179-28.155247 17.84646L365.79001 345.247138l-263.917832 39.507806c-11.399631 1.961678-20.774139 10.060123-24.355711 21.054525-3.613294 10.963703-0.778736 23.047926 7.257288 31.332612l191.202717 196.684568-45.6282 277.132808c-1.930979 11.741415 3.0208 23.608697 12.769838 30.491455 9.717316 6.882757 22.549575 7.630794 32.983205 1.868557l235.366565-129.47177 234.868215 130.282229c4.703115 2.616594 9.904581 3.924379 15.106046 3.924379 6.291287 0 12.551874-1.868557 17.877159-5.699816 9.748015-6.852058 14.763239-18.687618 12.862959-30.460756L747.488339 634.635061l191.669344-195.84341C947.286828 430.476265 950.121386 418.2365 946.44567 407.179676zM691.986257 602.337471c-6.882757 7.039323-10.060123 16.974603-8.471952 26.722618l37.000706 229.480508L526.666024 751.025908c-9.343809-5.232165-20.74344-5.232165-30.117948-0.062422L302.262138 857.856006l37.779442-229.387387c1.588171-9.717316-1.52575-19.652596-8.40953-26.754341L170.703847 436.176081l220.156142-31.686676c2.191922-0.378623 4.288676-0.980327 6.274914-1.771343 7.674796-2.63092 14.32117-8.233522 18.061354-16.156982l97.392144-206.183919 96.550986 206.712969c4.422729 9.406231 13.205766 16.008602 23.483854 17.596773l219.638349 33.886785L691.986257 602.337471z" p-id="8168"></path></svg>
                            我的收藏
                        </p>
                    </div>
                    <div class="right">
                        <span class="num">{{myInfo.collectionCount}}</span>
                        <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                    </div>
                </div>
                <div class="li-box">
                    <div class="left">
                        <p class="">
                            <svg t="1635852456325" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9001" width="128" height="128"><path d="M622.56056 464.834794c0 27.928073 22.73684 50.64854 50.664913 50.64854 27.956725 0 50.693566-22.720468 50.693566-50.64854 0-27.928073-22.73684-50.66389-50.693566-50.66389C645.2974 414.171927 622.56056 436.907745 622.56056 464.834794" p-id="9002"></path><path d="M931.254178 211.459063c0-40.637536-33.05893-73.698512-73.728188-73.698512L166.471964 137.76055c-40.637536 0-73.727165 33.059953-73.727165 73.698512l0 506.796488c0 40.637536 33.088606 73.696466 73.727165 73.696466l251.16846 0 94.343715 94.28641 94.315062-94.28641 251.226788 0c40.669258 0 73.728188-33.05893 73.728188-73.696466l0-82.560344-0.089028-1.282203L931.254178 211.459063zM875.96699 695.220928c0 22.88522-18.558681 41.444924-41.443901 41.444924L579.446623 736.665853l-67.462484 67.490114-67.430762-67.490114L189.506587 736.665853c-22.88522 0-41.4746-18.559705-41.4746-41.444924L148.031986 234.493685c0-22.88522 18.58938-41.488927 41.4746-41.488927l645.01548 0c22.88522 0 41.443901 18.603707 41.443901 41.488927l0 396.579247 0 36.161594L875.965967 695.220928z" p-id="9003"></path><path d="M461.321272 464.834794c0 27.928073 22.735817 50.64854 50.662867 50.64854 27.929096 0 50.66389-22.720468 50.66389-50.64854 0-27.928073-22.734794-50.66389-50.66389-50.66389C484.057089 414.171927 461.321272 436.907745 461.321272 464.834794" p-id="9004"></path><path d="M300.083008 464.834794c0 27.928073 22.735817 50.64854 50.66389 50.64854 27.927049 0 50.662867-22.720468 50.662867-50.64854 0-27.928073-22.735817-50.66389-50.662867-50.66389C322.817802 414.171927 300.083008 436.907745 300.083008 464.834794" p-id="9005"></path></svg>
                            我的观点
                        </p>
                    </div>
                    <div class="right">
                        <span class="num">{{myInfo.opinionCount}}</span>
                        <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                    </div>
                </div>
            </div>

            <div class="lis">
                <div class="li-box">
                    <div class="left">
                        <p class="">
                            <svg t="1635852505986" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9849" width="128" height="128"><path d="M798.408 569.848v-88.407c0-124.764-89.85-229.568-211.378-259.101v-1.493c0-41.949-31.487-75.954-70.328-75.954-38.838 0-70.328 34.004-70.328 75.954v1.733c-121.026 29.856-210.392 134.428-210.392 258.856v72.751h-0.059c1.453 89.798-70.493 107.41-70.493 155.882s39.292 67.386 87.767 67.386h122.755c1.714 58.393 64.233 105.335 141.109 105.335s139.395-46.938 141.109-105.335h122.438c48.475 0 87.771-18.91 87.771-67.386 0.005-45.503-63.661-64.015-69.969-140.22zM517.151 847.314c-58.389 0-105.722-30.723-105.722-68.625 0-0.413 0.010-0.825 0.026-1.239h211.395c0.010 0.413 0.026 0.822 0.026 1.239-0.005 37.901-47.336 68.625-105.727 68.625zM833.375 712.797c-2.197 22.761-32.25 30.008-51.159 30.008h-530.469c-14.482 1.97-51.705-5.107-51.156-29.513v-6.198c0.483-22.037 54.625-40.822 70.179-118.866v-34.038h-0.557v-66.675c0-119.753 91.718-218.82 211.063-235.378v-29.628c0-23.405 15.775-42.378 35.235-42.378s35.235 18.973 35.235 42.378v29.588c119.477 16.445 211.34 115.569 211.34 235.419v66.674h-0.205v30.694h0.273c0.712 56.066 69.668 102.662 70.217 119.522l0.005 8.391z" fill="#333333" p-id="9850"></path></svg>
                            我的消息
                        </p>
                    </div>
                    <div class="right">
                        <!-- 箭头 -->
                        <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                    </div>
                </div>
                <div class="li-box">
                    <div class="left">
                        <p class="">
                            <svg t="1635852533344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10649" width="128" height="128"><path d="M642.8 531.8c64.3-42.6 106.9-115.4 106.9-198.1C749.7 202.6 643.1 96 512 96S274.3 202.6 274.3 333.7c0 82.7 42.6 155.6 106.9 198.1C215.8 582.9 96 727.7 96 898.3c0 16.4 13.3 29.7 29.7 29.7s29.7-13.3 29.7-29.7c0-180.2 159.9-326.9 356.6-326.9 196.6 0 356.6 146.6 356.6 326.9 0 16.4 13.3 29.7 29.7 29.7s29.7-13.3 29.7-29.7c0-170.6-119.8-315.4-285.2-366.5zM333.7 333.7c0-98.3 80-178.3 178.3-178.3s178.3 80 178.3 178.3S610.3 512 512 512s-178.3-80-178.3-178.3z" fill="#47444F" p-id="10650"></path></svg>
                            我关注的用户
                        </p>
                    </div>
                    <div class="right">
                        <span class="num">{{myInfo.friendsCount}}</span>
                        <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                    </div>
                </div>
                <div class="li-box">
                    <div class="left">
                        <p class="">
                            <svg t="1635852582968" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12884" width="128" height="128"><path d="M102.7328 923.89888c-16.69632 0-30.27968-13.48096-30.27968-30.04416l0-73.63584c0-73.54368 22.2464-144.35328 64.33792-204.75904 41.10336-58.98752 98.16576-104.20224 165.02272-130.7392l11.00288-4.37248-9.33376-7.28576C250.88 432.01024 220.70784 370.6624 220.70784 304.74752c0-118.07232 96.72192-214.12864 215.6032-214.12864 118.87616 0 215.59808 96.06144 215.59808 214.12864 0 65.91488-30.17216 127.26272-82.76992 168.32l-9.33376 7.28576 11.00288 4.37248c66.86208 26.53696 123.92448 71.73632 165.02272 130.71872 42.0864 60.40576 64.3328 131.22048 64.3328 204.77952l0 73.63584c0 16.5632-13.58336 30.03904-30.27968 30.03904L102.7328 923.89888 102.7328 923.89888zM436.352 518.88128c-167.25504 0-303.32928 135.18336-303.32928 301.3376l0 43.60192 606.58688 0 0-43.60192C739.60448 654.06464 603.56608 518.88128 436.352 518.88128L436.352 518.88128zM436.31616 150.69184c-85.48864 0-155.03872 69.10976-155.03872 154.0608 0 84.94592 69.55008 154.05568 155.03872 154.05568 85.48352 0 155.0336-69.10976 155.0336-154.05568C591.34976 219.8016 521.79968 150.69184 436.31616 150.69184L436.31616 150.69184zM858.06592 813.43488c-0.36352-20.15232-2.37056-40.28928-5.96992-60.06272l35.37408 0 0-26.9312c0-104.2944-71.06048-194.95936-172.8-220.47744l-7.0144-1.664c-12.99456-4.4288-21.70368-15.68768-21.70368-28.10368 0-12.1088 8.09984-22.98368 20.6336-27.70432l0.2048-0.0768 0.19456-0.09216c42.09664-18.98496 69.29408-60.8768 69.29408-106.71616 0-49.65888-31.44192-93.48096-78.592-110.11584-7.91552-23.09632-19.49184-44.68736-34.44224-64.24064-0.60928-0.99328-1.22368-1.98144-1.83808-2.9696 97.00864 1.65888 175.43168 80.56832 175.43168 177.32608 0 43.89376-16.49664 86.13376-46.44352 118.9376l-5.97504 6.54848 7.8848 4.06016c96.05632 49.41824 155.7248 147.23584 155.71968 255.28832l0 56.96c0 16.55808-13.57824 30.0288-30.27456 30.0288L858.06592 813.42976 858.06592 813.43488z" p-id="12885"></path></svg>
                            关注我的用户
                        </p>
                    </div>
                    <div class="right">
                        <span class="num">{{myInfo.followersCount}}</span>
                        <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                    </div>
                </div>
                <div class="li-box">
                    <div class="left">
                        <p class="">
                            <svg t="1635852621239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2413" width="128" height="128"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="2414"></path></svg>
                            我赞过的观点
                        </p>
                    </div>
                    <div class="right">
                        <span class="num">{{myInfo.likedOpinionCount}}</span>
                        <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                    </div>
                </div>
            </div>

            <div class="lis">
                <div class="li-box">
                    <div class="left">
                        <p class="">
                            <svg t="1635852677117" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3247" width="128" height="128"><path d="M928.016126 543.908618 95.983874 543.908618c-17.717453 0-31.994625-14.277171-31.994625-31.994625S78.26642 479.919368 95.983874 479.919368l832.032253 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S945.73358 543.908618 928.016126 543.908618z" p-id="3248"></path><path d="M832.032253 928.016126 639.892491 928.016126c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l191.967747 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-159.973123c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 159.973123C928.016126 884.840585 884.840585 928.016126 832.032253 928.016126z" p-id="3249"></path><path d="M351.94087 928.016126l-159.973123 0c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-159.973123c0-17.717453 14.277171-31.994625 31.994625-31.994625S159.973123 654.341676 159.973123 672.05913l0 159.973123c0 17.717453 14.449185 31.994625 31.994625 31.994625l159.973123 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C383.935495 913.738955 369.658324 928.016126 351.94087 928.016126z" p-id="3250"></path><path d="M127.978498 383.935495c-17.717453 0-31.994625-14.277171-31.994625-31.994625l0-159.973123c0-52.980346 43.003528-95.983874 95.983874-95.983874l159.973123 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S369.658324 159.973123 351.94087 159.973123l-159.973123 0c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 159.973123C159.973123 369.658324 145.695952 383.935495 127.978498 383.935495z" p-id="3251"></path><path d="M896.021502 383.935495c-17.717453 0-31.994625-14.277171-31.994625-31.994625l0-159.973123c0-17.545439-14.277171-31.994625-31.994625-31.994625L639.892491 159.973123c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l191.967747 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 159.973123C928.016126 369.658324 913.738955 383.935495 896.021502 383.935495z" p-id="3252"></path></svg>
                            扫码登录
                        </p>
                    </div>
                    <div class="right">
                        <svg t="1635849704530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2523"></path></svg>
                    </div>
                </div>
            </div>

            <!-- 设置 -->
            <div class="setting">
                设置
            </div>
        </section>

    </div>
</template>

<script>
import appHeader from "../components/app-header.vue"
export default {
    name:"Mine",
    components:{
        appHeader
    },
    data(){
        return{
            myInfo:{},
            nickname:"",
            touxiang:""
        }
    },
    methods:{
        toMyCollection(){
            this.$router.push({path:'/myCollection'})
        }
    },
    mounted(){
        axios.get("/data/mine.json")
        .then(
            res=>{
                this.myInfo = res.data.resData;
                this.nickname = this.myInfo.user.nickname;
                this.touxiang = this.myInfo.user.avatar
            }
        )
        .catch(
            err=>{
                console.log(err);
            }
        )
    },
}
</script>

<style lang="scss" scoped>
$bodyCol:rgb(246,246,246);
$maxWidth:645px;
.contain-box{
    max-width: $maxWidth;
    position: absolute;
    left: 0;
    top: 43px;
    width: 100%;
    height: (100%-15);
    overflow-y: scroll;
    background-color: $bodyCol;
}
.lis{
    padding: 0 20px;
    margin-bottom: 10px;
    background-color: #fff;
    .li-box:last-child{
        border: 0;
    }
}
.li-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 5px 0px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(228, 227, 227);
    &.my{
        padding: 30px 20px;
        margin: 10px 0;
        border: 0;
    }
    .left{
        display: flex;
        align-items: flex-start;
        .head-img{
            width: 80px;
            height: 80px;
            background-color: rgb(41, 2, 38);
            border-radius: 50%;
            img{
                width: 100%;
                border-radius: 50%;
            }
        }
        p{
            font-size: 14px;
            color: rgb(28,28,28);
            &.username{
                font-size: 16px;
                margin-top: 15px;
                margin-left: 20px;
                svg{
                    path{
                        fill:rgb(235, 57, 175);
                    }
                }
            }
             svg{
                width: 16px;
                height: 16px;
                vertical-align:middle;
                margin-right: 10px;
                path{
                    fill:rgb(28,28,28);
                }
            }
        }
    }
    .right{
        .num{
            font-size: 14px;
            color: #ccc;
            margin-right: 5px;
        }
        svg{
            width: 12px;
            height: 12px;
            path{
                fill:#ccc
            }
        }
    }
}

.setting{
    font-size: 16px;
    color: rgb(115, 184, 141);
    text-align: center;
    background-color: #fff;
    padding: 15px 0;
    margin-top: 20px;
}
</style>